/*
vue 组件中数据传递
https://www.cnblogs.com/xzzzys/p/7761296.html
*/
/有种形式的传递：从父到子，从子到父，平行级别的传递
/ / 首先第一种：从父到子，用props属性绑定
//父级数据：
new vue({
    "el": "#app",
    data: {
        nickname: "小七"
    }
})
//子组件：
vue.component("myComp", {
    "props": {
        "username"
    },
    //或者用["username"]
    template: "<h1>欢迎{{username}}</h1>"
})

//页面上：
//1，<my-comp v-bind:username="nickname"></my-comp>
//2，<my-comp :username="nickname"></my-comp>
//把父级数据传给页面上的 nickname，再在子组件中的username去取传过来的值
//props:可以是对象{}也可以是数组[],如下：
props: {
    "username": {
        type: string,
        //数据类型
    default:
        function() { //表示不传值时的默认值为“游客”
            return "游客";
        }
    }
}

//数据类型有：string\number\boolean\function\array\object
//
//第二种：从子到父 ，用自定义事件方法
//
//在vue1.0中 vue：$emit("事件名称") //不会冒泡
// $dispatch("事件名称") //会冒泡
//在vue2.0中 用$emit("事件名称") 触发事件，没有$dispatch方法了
// 用$on("事件名称") 监听事件
//组件中定义函数名触发事件时，不允许用驼峰法
//
//自定义事件命名问题:
//1，自定义事件的名称不允许用驼峰法（尽量用动词）
//2，自定义事件对应的函数名也不能用托峰法
//子级数据：
methods:
{
    add:
    function() {
        this.$emit("myevent", this.count);
    },
    template: "<div @myevent='parentelent'></div>{{count}}"
}

//父级组件：
methods: {
    "parentelent": function(msg) {...
    } //msg就是拿到的count数据
}

//第三种，平行组件传递数据：用空实例搭建桥梁，如下
vue.component("mycomp1", {
    "template": "<div>组件一<button v-on:click:'sendDate'></button></div>",
    //绑定点击事件
    data: function() {
        return {
            user: {
                id: 1,
                name: "xzz"
            }
        }
    },
    "methods": {
        "sendDate": function() { //定义点击事件
            this.$emit('send', this.user);
        }
    }
});

vue.component("mycomp2", {
    "template": "<div>{{template22}}组件二</div>",
    created: function() { //生命周期
        this.$on("send",
        function(datas) { //datas就是传入的user的数据
            this.tempDate = datas;
        })
    },
    data: function() {
        return {
            "tempDate": "数据"
        } //用于保存数据
    }
});

var bus = new Vue(); //建一两个组件的通信桥梁，是信息传递对象
